<template>
    <div>
        <el-card shadow="never">
            <template slot="header">
                <span>分类</span>
            </template>
            <Search :search-options="searchOptions" @search="handleSearch">
                <template #customSelectSlot="{ form }">
                    <el-select v-model="merchant_id" @change="merchantChange" placeholder="请选择" style="width: 180px">
                        <el-option v-for="item in merchant_options" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>
                <template slot="extra-buttons">
                    <el-button type="primary" @click="add" v-auth="'add'">添加优惠券</el-button>
                </template>

            </Search>
            <el-table v-loading="listLoading" element-loading-text="数据正在加载中" :data="data" border fit
                highlight-current-row style="width: 100%">
                <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
                    :align="item.align">
                    <template slot-scope="{ row }">
                        <div v-if="item.prop === 'type'">
                            {{ row.type === 1 ? '折扣券' : '满减券' }}
                        </div>
                        <div v-else-if="item.prop === 'min_amount'">
                            满{{ row.min_amount }}元可用
                        </div>
                        <div v-else-if="item.prop === 'status'">
                            <el-tag :type="row.status == 1 ? 'success' : 'danger'">{{ row.status == 1 ? '启用' : '禁用'
                            }}</el-tag>
                        </div>
                        <div v-else>
                            {{ row[item.prop] }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="260" align="center">
                    <template slot-scope="{ row }">
                        <el-button type="primary" size="mini" @click="lookUser(row)" v-auth="'edit'">
                            领取用户查看
                        </el-button>
                        <el-button type="primary" size="mini" @click="handleEdit(row)" v-auth="'edit'">
                            编辑
                        </el-button>
                        <el-button type="danger" size="mini" @click="handleDel(row)" v-auth="'del'">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :page="page" :page_size="page_size" :total="total" @sizeChange="sizeChange"
                @currentChange="pageChange" />
        </el-card>
        <AddOrEdit ref="AddOrEditRef" @refresh="pageChange" :merchant_id="merchant_id" :goods_category="goods_category" />

        <TableDialog title="领取用户查看" :coupon_id="coupon_id" :visible.sync="dialogVisible" @close="handleClose" />
    </div>
</template>

<script>
import Search from '@/components/Search.vue';
import Pagination from '@/components/Pagination.vue';
import TableDialog from './TableDialog.vue';
import { SEARCH_OPTIONS, columns } from './options';
import { couponDelete, merchantList, couponList, goodsCategoryList } from '../api';
import AddOrEdit from './AddOrEdit.vue';
export default {
    data() {
        return {
            dialogVisible: false,
            searchOptions: SEARCH_OPTIONS,
            columns: columns,
            listLoading: false,
            data: [],
            page: 1,
            total: 0,
            page_size: 10,
            searchParmas: {},
            merchant_id: null,
            merchant_options: [],
            coupon_id: null,
            goods_category: [],
        }
    },
    components: { Search, Pagination, AddOrEdit, TableDialog },
    created() {
        goodsCategoryList

        merchantList({ page: 1, page_size: 9999 }).then(res => {
            const id = res.data[0]?.id;
            this.merchant_id = id;
            this.merchant_options = res.data.map(i => ({
                label: i.name,
                value: i.id
            }))
            this.initCategoryList(id);
            this.init();
        })
    },
    methods: {
        initCategoryList(id) {
            goodsCategoryList({ page: 1, page_size: 999, merchant_id: id }).then(res => {
                this.goods_category = res.data.map(i => ({
                    label: i.name,
                    value: i.id
                }))

            })
        },
        handleClose() {
            this.dialogVisible = false;
        },
        merchantChange(e) {
            this.merchant_id = e;
            this.initCategoryList(e);
            this.pageChange(1);
        },
        init() {
            const p = {
                page: this.page,
                page_size: this.page_size,
                ...this.searchParmas,
                merchant_id: this.merchant_id,
            }
            couponList(p).then(res => {
                console.log(res);
                this.total = res.total;
                this.data = res.data
            })
        },
        handleSearch(params) {
            this.searchParmas = params;
            // 执行搜索操作
            this.page = 1;
            this.init();
        },
        lookUser(data) {
            this.coupon_id = data.id;
            this.dialogVisible = true;

        },
        add() {
            this.$refs.AddOrEditRef.add();
        },
        handleEdit(data) {
            this.$refs.AddOrEditRef.edit(data);
        },
        handleDel(data) {
            this.$confirm('确认删除该商户?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                couponDelete({ ids: data.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.pageChange(1);
                }).finally(() => {
                    this.listLoading = false;
                })
            }).catch(() => { })
        },
        pageChange(page) {
            this.page = page;
            this.init();
        },
        sizeChange(size) {
            this.page_size = size;
            this.page = 1;
            this.init();
        },
    },
}
</script>

<style lang='scss' scoped></style>